import { defineComponent, h, provide, ref } from "vue"
import { WebExcelHead } from './core/head'
import { WebExcelBody } from './core/body'
import { WebExcelContextmenu } from "./core/contextmenu"
import { useSelectCellState, useEditCellState, useCurrentView, useContextmenu } from "./core/state"
import { ProvideSelectStateKey, ProvideTableRefKey, ProvideEditStateKey, ProvideRootProps, ProvideCurrentView, ProvideContextmenu } from "./core/keys"
import { useCopy } from "./core/hooks/copy"
import { useListenDocumentClick } from "./core/hooks/outRest"
import { logInfo } from "./core/log"
import { usePaste } from "./core/hooks/paste"

/**
 * 计算grid布局的列属性设置 style 对象
 * @param columns 
 * @returns `{ grid-template-columns: ... }`
 */
function calcGridColumns(props: Props){
    const widths: (number|string)[] = [];
    if (props.showIndex) widths.push('40px')
    props.columns?.forEach(col => {
        if (col.width === undefined || col.width === null) widths.push('auto')
        else if (col.width === parseFloat(`${col.width}`)) widths.push(col.width + 'px')
        else widths.push(col.width)
    })
    return {
        'grid-template-columns': `${widths.join(' ')}`
    }
}

const WebExcel = defineComponent(
    (props: Props, { attrs, slots, emit, expose }) => {

        provide(ProvideRootProps, props)

        // 注入状态记录
        const currentView = useCurrentView()
        provide(ProvideCurrentView, currentView)
        const SelectState = useSelectCellState()
        provide(ProvideSelectStateKey, SelectState)
        const { copyHandel } = useCopy(SelectState, currentView, props)
        const { pasteHandel } = usePaste(SelectState, currentView, props)

        const EditCellState = useEditCellState()
        provide(ProvideEditStateKey, EditCellState)

        const Contextmenu = useContextmenu()
        provide(ProvideContextmenu, Contextmenu)
        
        // 注入ref
        const tableRef = ref()
        provide(ProvideTableRefKey, tableRef)

        useListenDocumentClick(SelectState, EditCellState, currentView, tableRef)
        function scrollHandel(){
            tableRef.value.style.setProperty('--scroll', `${tableRef.value.scrollTop}px`);
        }

        expose({
            copy: copyHandel,
            paste: pasteHandel,
        })
        

        return () => h(
            'session', 
            {
                class: 'web-excel',
                ref: tableRef,
            },
            h(
                'div', 
                {
                    class: 'web-excel-warp'
                }, 
                h(
                    'div', {
                        class: 'web-excel-grid',
                        style: calcGridColumns(props)
                    }, 
                    [ 
                        h(WebExcelHead, props, {
                            headerCell: slots.headerCell,
                            headerEditCell: slots.headerEditCell,
                            headerIndex: slots.headerIndex
                        }),
                        h(WebExcelBody, props, {
                            bodyCell: slots.bodyCell,
                            bodyEditCell: slots.bodyEditCell,
                        }),
                        h(WebExcelContextmenu, {
                            ...props,
                            copyHandel,
                            pasteHandel
                        }, {
                            contextmenu: slots.contextmenu
                        })
                    ]
                )
            )
            
        )
    },
    {
        props: [
            'columns', 
            'dataSource', 
            'readonly', 
            'contextmenu', 
            'disabled',
            'customRow',
            'selectUnit',
            'showIndex'
        ]
    }
)


export default WebExcel